วงจรชีวิตของธุรกรรมการชำระเงิน

ดูวิธีที่ผู้ขายผสานรวมแอปการชำระเงินและวิธีที่ธุรกรรมการชำระเงินทำงานร่วมกับ Payment Request API

Eiji Kitamura

Milica Mihajlija

Web Payments API เป็นฟีเจอร์การชำระเงินเฉพาะที่ติดตั้งมาในเบราว์เซอร์เป็นครั้งแรก เมื่อใช้การชำระเงินผ่านเว็บ การผสานรวมผู้ขายกับแอปการชำระเงินจะง่ายขึ้น ขณะที่ประสบการณ์ของลูกค้าจะมีประสิทธิภาพและปลอดภัยยิ่งขึ้น

ดูข้อมูลเพิ่มเติมเกี่ยวกับประโยชน์ของการใช้การชำระเงินผ่านเว็บได้ที่การเพิ่มศักยภาพให้กับแอปการชำระเงินด้วยการชำระเงินผ่านเว็บ

บทความนี้จะอธิบายธุรกรรมการชำระเงินในเว็บไซต์ของผู้ขายและช่วยให้คุณเข้าใจวิธีการทำงานของการผสานรวมแอปการชำระเงิน

กระบวนการนี้ประกอบด้วย 6 ขั้นตอนดังนี้

1. ผู้ขายเริ่มธุรกรรมการชำระเงิน
2. ผู้ขายแสดงปุ่มการชำระเงิน

3. ลูกค้ากดปุ่มชำระเงิน

   

4. เบราว์เซอร์จะเปิดแอปการชำระเงิน

   

5. หากลูกค้าเปลี่ยนแปลงรายละเอียด (เช่น ตัวเลือกการจัดส่งหรือที่อยู่) ผู้ขายจะอัปเดตรายละเอียดธุรกรรมให้สอดคล้องกับการเปลี่ยนแปลง

   

6. หลังจากลูกค้ายืนยันการซื้อแล้ว ผู้ขายจะตรวจสอบการชำระเงินและทำธุรกรรมให้เสร็จสมบูรณ์

   

ขั้นตอนที่ 1: ผู้ขายเริ่มธุรกรรมการชำระเงิน

เมื่อลูกค้าตัดสินใจซื้อ ผู้ขายจะเริ่มธุรกรรมการชำระเงินโดยสร้างออบเจ็กต์ PaymentRequest ออบเจ็กต์นี้มีข้อมูลสำคัญเกี่ยวกับธุรกรรม ดังนี้

• วิธีการชำระเงินที่ยอมรับและข้อมูลของวิธีการชำระเงินดังกล่าวเพื่อประมวลผลธุรกรรม
• รายละเอียด เช่น ราคารวม (ต้องระบุ) และข้อมูลเกี่ยวกับสินค้า
• ตัวเลือกที่ผู้ขายขอข้อมูลการจัดส่งได้ เช่น ที่อยู่สำหรับจัดส่งและตัวเลือกการจัดส่ง
• ผู้ขายยังขอที่อยู่สำหรับการเรียกเก็บเงิน ชื่อผู้ชำระเงิน อีเมล และหมายเลขโทรศัพท์ได้ด้วย
• ผู้ขายยังระบุประเภทการจัดส่ง (shipping, delivery หรือ pickup) ที่ไม่บังคับใน PaymentRequest ได้ด้วย แอปการชำระเงินจะใช้ข้อมูลดังกล่าวเป็นคำแนะนำในการแสดงป้ายกำกับที่ถูกต้องใน UI ได้

const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay',
  data: {
    transactionId: '****'
  }
}], {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
}, {
  requestShipping: true,
  requestBillingAddress: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestPayerName: true,
  shippingType: 'delivery'
});

เมื่อระบุข้อมูลธุรกรรมแล้ว เบราว์เซอร์จะเข้าสู่กระบวนการค้นหาแอปการชำระเงินที่ระบุใน PaymentRequest โดยอิงตามตัวระบุวิธีการชำระเงิน วิธีนี้จะช่วยให้เบราว์เซอร์ระบุแอปการชำระเงินที่จะเปิดได้ทันทีที่ผู้ขายพร้อมดำเนินการธุรกรรม

ดูรายละเอียดเกี่ยวกับวิธีการทำงานของกระบวนการค้นพบได้ที่การตั้งค่าวิธีการชําระเงิน

ขั้นตอนที่ 2: ผู้ขายแสดงปุ่มการชำระเงิน

ผู้ขายรองรับวิธีการชำระเงินได้หลายวิธี แต่ควรแสดงปุ่มการชำระเงินสำหรับวิธีการชำระเงินที่ลูกค้าใช้ได้จริงเท่านั้น การแสดงปุ่มการชำระเงินที่ใช้งานไม่ได้ทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดี หากผู้ขายคาดการณ์ได้ว่าวิธีการชำระเงินที่ระบุไว้ในออบเจ็กต์ PaymentRequest จะใช้ไม่ได้กับลูกค้า ผู้ขายสามารถระบุวิธีแก้ปัญหาสำรองหรือไม่แสดงปุ่มนั้นเลยก็ได้

เมื่อใช้อินสแตนซ์ PaymentRequest ผู้ขายจะสอบถามได้ว่าลูกค้ามีแอปการชำระเงินหรือไม่

ลูกค้ามีแอปการชำระเงินไหม

canMakePayment() ของ PaymentRequest จะแสดงผลเป็น true หากมีแอปเป๋าตังในอุปกรณ์ของลูกค้า "พร้อมใช้งาน" หมายความว่าระบบพบแอปการชำระเงินที่รองรับวิธีการชำระเงินนั้น และติดตั้งแอปการชำระเงินสำหรับแพลตฟอร์มนั้นแล้ว หรือแอปการชำระเงินบนเว็บพร้อมที่จะลงทะเบียน

const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
  // Fallback to other means of payment or hide the button.
}

ขั้นตอนที่ 3: ลูกค้ากดปุ่มชำระเงิน

เมื่อลูกค้ากดปุ่มชำระเงิน ผู้ขายจะเรียกใช้show()วิธีของอินสแตนซ์ PaymentRequest ซึ่งจะทริกเกอร์การเปิด UI การชำระเงินทันที

ในกรณีที่มีการตั้งค่าราคารวมสุดท้ายแบบไดนามิก (เช่น ดึงข้อมูลจากเซิร์ฟเวอร์) ผู้ขายสามารถเลื่อนการเปิดตัว UI การชําระเงินจนกว่าจะทราบราคารวม

การเลื่อนการเปิดตัว UI การชำระเงิน

ดูการสาธิตUI การเลื่อนการชำระเงินจนกว่าจะมีการกำหนดราคารวมสุดท้าย

หากต้องการเลื่อน UI การชำระเงิน ผู้ขายจะส่ง Promise ไปยังเมธอด show() เบราว์เซอร์จะแสดงตัวบ่งชี้การโหลดจนกว่า Promise จะแก้ไขและธุรกรรมพร้อมที่จะเริ่มต้น

const getTotalAmount = async () => {
  // Fetch the total amount from the server, etc.
};

try {
  const result = await request.show(getTotalAmount());
  // Process the result…
} catch(e) {
  handleError(e);
}

หากไม่ได้ระบุ Promise เป็นอาร์กิวเมนต์สำหรับ show() เบราว์เซอร์จะเปิด UI การชำระเงินทันที

ขั้นตอนที่ 4: เบราว์เซอร์เปิดแอปการชำระเงิน

เบราว์เซอร์สามารถเปิดแอปการชำระเงินสำหรับแพลตฟอร์มหรือแอปการชำระเงินบนเว็บโดยเฉพาะ (ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ Chrome กำหนดแอปการชำระเงินที่จะเปิด)

วิธีการสร้างแอปการชำระเงินส่วนใหญ่ขึ้นอยู่กับนักพัฒนาแอป แต่เหตุการณ์ที่ส่งจากและไปยังผู้ขาย รวมถึงโครงสร้างของข้อมูลที่ส่งไปพร้อมกับเหตุการณ์เหล่านั้นจะได้รับมาตรฐาน

เมื่อเปิดแอปการชำระเงิน แอปจะได้รับข้อมูลธุรกรรมที่ส่งไปยังออบเจ็กต์ PaymentRequest ในขั้นตอนที่ 1 ซึ่งประกอบด้วยข้อมูลต่อไปนี้

• ข้อมูลวิธีการชำระเงิน
• ราคารวม
• ตัวเลือกการชำระเงิน

แอปการชำระเงินใช้ข้อมูลธุรกรรมเพื่อติดป้ายกำกับ UI

ขั้นตอนที่ 5: วิธีที่ผู้ขายอัปเดตรายละเอียดธุรกรรมโดยขึ้นอยู่กับการกระทำของลูกค้า

ลูกค้ามีตัวเลือกในการเปลี่ยนรายละเอียดธุรกรรม เช่น วิธีการชำระเงินและตัวเลือกการจัดส่งในแอปการชำระเงิน ขณะที่ลูกค้าทำการเปลี่ยนแปลง ผู้ขายจะได้รับเหตุการณ์การเปลี่ยนแปลงและอัปเดตรายละเอียดธุรกรรม

เหตุการณ์ที่ผู้ขายได้รับมี 4 ประเภทดังนี้

• เหตุการณ์การเปลี่ยนแปลงวิธีการชำระเงิน
• เหตุการณ์การเปลี่ยนแปลงที่อยู่สำหรับจัดส่ง
• เหตุการณ์การเปลี่ยนแปลงตัวเลือกการจัดส่ง
• เหตุการณ์การตรวจสอบผู้ขาย

เหตุการณ์การเปลี่ยนแปลงวิธีการชำระเงิน

แอปการชำระเงินรองรับวิธีการชำระเงินได้หลายวิธี และผู้ขายอาจเสนอส่วนลดพิเศษโดยขึ้นอยู่กับวิธีที่ลูกค้าเลือก เหตุการณ์การเปลี่ยนแปลงวิธีการชำระเงินสามารถแจ้งผู้ขายเกี่ยวกับวิธีการชำระเงินใหม่เพื่อให้อัปเดตราคารวมพร้อมส่วนลดและส่งกลับไปยังแอปการชำระเงินได้ เพื่อครอบคลุมกรณีการใช้งานนี้

request.addEventListener('paymentmethodchange', e => {
  e.updateWith({
    // Add discount etc.
  });
});

เหตุการณ์การเปลี่ยนแปลงที่อยู่สำหรับจัดส่ง

แอปการชำระเงินสามารถระบุที่อยู่สำหรับจัดส่งของลูกค้าได้ (ไม่บังคับ) ซึ่งจะสะดวกสำหรับลูกค้าเนื่องจากลูกค้าไม่ต้องกรอกรายละเอียดในแบบฟอร์มด้วยตนเองและสามารถจัดเก็บที่อยู่สำหรับจัดส่งในแอปการชำระเงินที่ต้องการแทนที่จะจัดเก็บในเว็บไซต์ของผู้ขายหลายแห่ง

หากลูกค้าอัปเดตที่อยู่สำหรับจัดส่งในแอปการชำระเงินหลังจากเริ่มธุรกรรม ระบบจะส่งเหตุการณ์ 'shippingaddresschange' ไปยังผู้ขาย เหตุการณ์นี้ช่วยให้ผู้ขายระบุค่าจัดส่งตามที่อยู่ใหม่ อัปเดตราคารวม และส่งกลับไปยังแอปการชำระเงินได้

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

หากผู้ขายจัดส่งไปยังที่อยู่ที่มีการอัปเดตไม่ได้ ผู้ขายสามารถส่งข้อความแสดงข้อผิดพลาดได้โดยเพิ่มพารามิเตอร์ข้อผิดพลาดลงในรายละเอียดธุรกรรมที่ส่งกลับไปยังแอปการชำระเงิน

เหตุการณ์การเปลี่ยนแปลงตัวเลือกการจัดส่ง

ผู้ขายเสนอตัวเลือกการจัดส่งหลายรายการให้แก่ลูกค้าได้ และสามารถมอบสิทธิ์ตัวเลือกดังกล่าวแก่แอปการชำระเงินได้ ตัวเลือกการจัดส่งจะแสดงเป็นรายการราคาและชื่อบริการที่ลูกค้าเลือกได้ เช่น

• การจัดส่งแบบมาตรฐาน - ฟรี
• การจัดส่งด่วน - 5 USD

เมื่อลูกค้าอัปเดตตัวเลือกการจัดส่งในแอปการชำระเงิน ระบบจะส่งเหตุการณ์ 'shippingoptionchange' ไปยังผู้ขาย จากนั้นผู้ขายจะกำหนดค่าจัดส่ง อัปเดตราคารวม และส่งกลับไปยังแอปการชำระเงินได้

request.addEventListener('shippingoptionchange', e => {
  e.updateWith({
    // Update the details
  });
});

ผู้ขายยังแก้ไขตัวเลือกการจัดส่งแบบไดนามิกตามที่อยู่สำหรับจัดส่งของลูกค้าได้ด้วย ซึ่งจะเป็นประโยชน์เมื่อผู้ขายต้องการเสนอตัวเลือกการจัดส่งชุดต่างๆ สำหรับลูกค้าในประเทศและต่างประเทศ

เหตุการณ์การตรวจสอบผู้ขาย

แอปการชำระเงินสามารถดำเนินการตรวจสอบผู้ขายก่อนที่จะดำเนินการตามขั้นตอนการชำระเงินเพื่อเพิ่มความปลอดภัย การออกแบบกลไกการตรวจสอบขึ้นอยู่กับแอปการชำระเงิน แต่เหตุการณ์การตรวจสอบผู้ขายจะแจ้งให้ผู้ขายทราบถึง URL ที่ใช้ตรวจสอบตนเองได้

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

ขั้นตอนที่ 6: ผู้ขายตรวจสอบการชำระเงินและทำธุรกรรมให้เสร็จสมบูรณ์

เมื่อลูกค้าให้สิทธิ์การชำระเงินเรียบร้อยแล้ว วิธีการ show() จะแสดงผลลัพธ์เป็น PaymentResponse ออบเจ็กต์ PaymentResponse มีข้อมูลต่อไปนี้

• รายละเอียดผลการชำระเงิน
• ที่อยู่สำหรับจัดส่ง
• ตัวเลือกการจัดส่ง
• ข้อมูลติดต่อ

เมื่อถึงจุดนี้ UI ของเบราว์เซอร์อาจยังแสดงตัวบ่งชี้การโหลดอยู่ ซึ่งหมายความว่าธุรกรรมยังไม่เสร็จสมบูรณ์

หากแอปการชำระเงินสิ้นสุดลงเนื่องจากการชำระเงินไม่สำเร็จหรือมีข้อผิดพลาด Promise ที่แสดงผลจาก show() จะปฏิเสธ และเบราว์เซอร์จะสิ้นสุดธุรกรรมการชำระเงิน

การประมวลผลและตรวจสอบการชำระเงิน

details ใน PaymentResponse คือออบเจ็กต์ข้อมูลเข้าสู่ระบบการชำระเงินที่แสดงผลจากแอปการชำระเงิน ผู้ขายสามารถใช้ข้อมูลเข้าสู่ระบบดังกล่าวเพื่อประมวลผลหรือตรวจสอบการชำระเงิน วิธีการทํางานของกระบวนการสําคัญนี้ขึ้นอยู่กับตัวแฮนเดิลการชําระเงิน

การทำธุรกรรมให้เสร็จสมบูรณ์หรือลองอีกครั้ง

หลังจากพิจารณาว่าธุรกรรมสำเร็จหรือไม่ ผู้ขายจะทำอย่างใดอย่างหนึ่งต่อไปนี้ได้

• เรียกใช้เมธอด .complete() เพื่อทำธุรกรรมให้เสร็จสมบูรณ์และปิดตัวบ่งชี้การโหลด
• ให้ลูกค้าลองอีกครั้งโดยเรียกใช้เมธอด retry()

async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}

async function validateResponse(response) {
  try {
    const errors = await checkAllValuesAreGood(response);
    if (errors.length) {
      await response.retry(errors);
      return validateResponse(response);
    }
    await response.complete("success");
  } catch (err) {
    // Something went wrong…
    await response.complete("fail");
  }
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();

ขั้นตอนถัดไป

• ดูวิธีประกาศตัวระบุวิธีการชำระเงินโดยละเอียดในการตั้งค่าวิธีการชำระเงิน
• ดูวิธีสร้างแอปการชำระเงินสำหรับแพลตฟอร์มที่เฉพาะเจาะจงในคู่มือนักพัฒนาแอปการชำระเงิน Android
• ดูวิธีสร้างแอปการชำระเงินบนเว็บในคำแนะนำสำหรับนักพัฒนาแอปการชำระเงินบนเว็บ